<template>
    <div class="loginBox">
        <div><h1>管理员登录</h1></div>
        <div class="lform">
            <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px">
                <el-form-item label="登录账号" prop="userName">
                  <el-input v-model="loginForm.userName" autocomplete="off"></el-input>
                </el-form-item>
              <el-form-item label="登录密码" prop="userPass">
                <el-input type="password" v-model="loginForm.userPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleLogin()">提交</el-button>
                <el-button @click="resetLoginForm()">重置</el-button>
              </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {adminLogin} from '../api/api.js'
    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    userName: '',
                    userPass: ''
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入登录账号', trigger: 'blur' }
                    ],
                    userPass: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' }
                    ],
                },
                formLabelWidth: "140px",
            }
        },
        methods:{
            handleLogin() {
                 this.$refs['loginForm'].validate((valid) => {
                    if(valid) {
                        // 进行登录请求
                        console.log('可以登录了');
                        let param = {
                            userName: this.loginForm.userName,
                            passWord: this.loginForm.userPass
                        }
                        adminLogin(param).then(res => {
                            console.log('userlogin', res);
                            if(res.data.code == 200) {
                                let token = res.data.data.token
                                let user = res.data.data
                                window.sessionStorage.setItem('token', token)
                                window.sessionStorage.setItem('user', JSON.stringify(user))
                                
                                this.$router.push('/')
                            }
                            else {
                                let msg = res.data.msg
                                this.$message(msg)
                            }
                        })
                    }
                    else {
                        console.log('还不能登录');
                        return false
                    }
                 })
            },
            resetLoginForm() {
                this.$refs['loginForm'].resetFields();
                // this.loginForm.userName = ''
                // this.loginForm.userPass = ''
            }
        }
    }
</script>

<style>
    .loginBox {
        margin: auto;
        margin-top: 100px;
        text-align: center;
    }
    
    .lform {
        width: 600px;
        height: 400px;
        margin: auto;
        /* border: #2C3E50 solid 1px; */
    }
</style>
